<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>

<body>
    <button id = "reset">重新开始一局</button>
    <br/>
    请输入要猜的数字：<input type="text" name="" id="guessNum"> <button id="guess">猜测</button>
    <br/>
    已经猜的次数：<span id = "count">0</span><br />
    结果：<span id="result"></span>

    <script>
        let number = Math.floor(Math.random() * 100) + 1;
        console.log(number);
         let count = 0;
        $("#guess").click(function () {
            count++;
            $("#count").text(count);

        
            let guessNum = parseInt($("#guessNum").val());

            if (guessNum > number) {
                $("#result").text("猜大了");
                $("#result").css("color","red");
            }else if(guessNum < number){
                $("#result").text("猜小了");
                $("#result").css("color","blue");
            }else if(guessNum == number){
                $("#result").text("猜对啦！！！");
                $("#result").css("color","green");
                $("#result").css("font-size","20px");
            }else{
                $("#result").text("非数字！");
                $("#result").css("color","red");
                $("#result").css("font-size","30px");
            }
        })

        $("#reset").click(function(){
             number = Math.floor(Math.random() * 100) + 1;
             console.log(number);
             count = 0;
             $("#guessNum").val("");
             $("#count").text(count);
              $("#result").text("");
        })
    </script>
</body>

</html>